@radiusSize: 10px;
@bgWidth100: 100%;
@bgWidth120: 120%;
@bgHeight180: 180%;
.lbbArticleItem {
  position: relative;
  width: 100%;
  background-color: var(--background-primary);
  transition: all 500ms;
  &:hover {
    transform: scale(1.05);
  }
  .lbbPicture {
    position: relative;
    flex: 2;
    height: 100%;
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 30;
      content: '';
    }
    & > img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      object-fit: cover;
      background-size: cover;
    }
    & > span {
      position: absolute;
      left: 0;
      z-index: 20;
      background: linear-gradient(
        130deg,
        rgb(36, 198, 220),
        rgb(84, 51, 255) 41.07%,
        rgb(255, 0, 153) 76.05%
      );
      border-radius: @radiusSize;
      opacity: 0.4;
      pointer-events: none;
    }
  }
  .lbbRightContent {
    position: relative;
    z-index: 30;
    flex: 3;
    height: 100%;
    padding: 15px;
    overflow: hidden;
    .lbbRow1 {
      display: flex;
      align-items: center;
      justify-content: start;
      .lbbAuthorName {
        margin: 0 10px;
        color: #000;
        font-weight: 600;
        font-size: 16px;
      }
      .lbbLabelWrapper {
        display: flex;
        column-gap: 10px;
      }
      .lbbCreateDate {
        margin: 0 10px;
        color: #bbb;
        font-size: 16px;
      }
    }
    .lbbArticleTitle {
      margin: 15px 0;
      font-weight: 700;
      font-size: 24px;
      .lbbLockOutlined {
        margin-left: 10px;
        font-size: 24px;
      }
    }
    .lbbAttribute {
      display: flex;
      column-gap: 10px;
      .lbbActionIconActivate {
        color: #fc5533;
      }
      .lbbActionIcon {
        display: flex;
        align-items: center;
        column-gap: 4px;
      }
    }
  }
}
.lbbArticleList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  .lbbArticleItem {
    display: flex;
    flex-direction: column;
    height: 300px;
    .lbbPicture {
      flex: 1.5;
      & > img {
        width: @bgWidth100;
        min-width: @bgWidth100;
        height: @bgHeight180;
        border-top-left-radius: @radiusSize;
        border-top-right-radius: @radiusSize;
      }
      & > span {
        width: @bgWidth100;
        height: @bgHeight180;
      }
      &::after {
        width: @bgWidth100;
        height: calc(@bgHeight180 + 1%);
        background: var(--article-cover);
      }
    }
  }
}
